<template>
	<view>
		<unicloud-db ref="udb" collection="list" v-slot:default="{data, loading, error, options}" :page-size="pageSize"
			:page-current="pageCode">
			<view v-if="error">{{error.message}}</view>
			<view v-else class="list-item" v-for="(v, i) in data" :key="i">
				<image :src="v.image" mode=""></image>
				<view class="right">
					<view class="title">{{ v.title }}</view>
					<view class="desc">{{v.desc}}</view>
					<view class="price">¥：{{ v.price }}</view>
				</view>
			</view>
			<view v-if="loading">正在加载...</view>
		</unicloud-db>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				pageCode: 1,
				pageSize: 10
			}
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		async onPullDownRefresh() {
			// 重置分页
			await this.$refs.udb.reset() //udb为unicloud-db组件的ref属性值
			// 清空数据， 并重新请求
			await this.$refs.udb.refresh() //udb为unicloud-db组件的ref属性值
			// 关闭转一传
			uni.stopPullDownRefresh()
		}
	}
</script>


<style scoped lang="scss">
	.list-item {
		display: flex;

		image {
			width: 150px;
			height: 120px;
			flex-shrink: 0;
		}
	}
</style>